<!--
 * @Descripttion: ''
 * @Author: lilong(lilong@hztianque.com)
 * @Date: 2020-11-06 15:12:36
 * @LastEditTime: 2020-12-07 19:24:27
--> 
<template>
  <div class="main">
    <div class="scroll-list-box" v-drag>
       <div class="list-scroll-header">
          <ul>
            <li
              v-for="(item,index) in headerList"
              :key="index"
              :style="{flex:`${item.width&&item.width}`}"
            >{{item.name}}</li>
          </ul>
        </div>
      <list-scroll :data="dataScrollList" :option="scrollOption" ref="scrollList">
        <ul class="scroll-list" slot="main">
          <li v-for="(item,index) in dataScrollList" :key="index">
            <span>{{item.name}}</span>
            <span>{{item.age}}</span>
            <span>{{item.marriage}}</span>
          </li>
        </ul>
      </list-scroll>
    </div>
    <tab-page :data="dataLists" :option="option1">
      <ul class="list-box">
        <li v-for="(item,index) in dataLists" :key="index">{{item.name}}</li>
      </ul>
    </tab-page>
  </div>
</template>

<script>
import listScroll from "../../plugins/components/list-scroll/index";
import tabPage from "../../plugins/components/tabPage/index.vue";

export default {
  components: {
    listScroll,
    tabPage,
  },
  data() {
    return {
      scrollOption: {
        number: 5,
        seamless: false,
        duration: 1000,
      },
      dataScrollList: [],
      lists: [
        {
          name: "李四",
          age: 24,
          marriage: "0",
        },
        {
          name: "李四",
          age: 24,
          marriage: "11",
        },
        {
          name: "李四",
          age: 24,
          marriage: "22",
        },

        {
          name: "李四",
          age: 24,
          marriage: "33",
        },
        {
          name: "李四",
          age: 24,
          marriage: "44",
        },
        {
          name: "李四",
          age: 24,
          marriage: "55",
        },
        {
          name: "李四",
          age: 24,
          marriage: "66",
        },
        {
          name: "李四",
          age: 24,
          marriage: "77",
        },
        {
          name: "李四1111111",
          age: 24,
          marriage: "88",
        },
      ],
      headerList: [
        {
          name: "姓名",
          width: 1,
        },
        {
          name: "年龄",
          width: 1,
        },
        {
          name: "婚姻状况",
          width: 1,
        },
      ],
      option1: {
        number: 5, //默认五个
        single: true,
        autoScroll: true,
        autoScrollTime: 2000,
        button: true,
        // 注意：如果有间隔，请都向右，即margin-right
      },
      dataLists: [
        {
          name: "内容1",
        },
        {
          name: "内容2",
        },
        {
          name: "内容3",
        },
        {
          name: "内容4",
        },
        {
          name: "内容5",
        },
        {
          name: "内容6",
        },
        //  {
        //    name:'内容11'
        //  },
        //  {
        //    name:'内容21'
        //  },
        //  {
        //    name:'内容31'
        //  },
        //  {
        //    name:'内容41'
        //  },
        //  {
        //    name:'内容51'
        //  },
        //  {
        //    name:'内容61'
        //  },
      ],
    };
  },
  mounted() {
    console.log(this.$CMap);
    this.dataScrollList = this.lists;
    this.dataScrollList.push(...this.lists);
    setTimeout(() => {
      this.dataScrollList.push({
        name: "李1111111111四",
        age: 24,
        marriage: "0",
      });
    }, 5000);
    // console.log(this.install)
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  .list-scroll-header {
    width: 100%;
    background: cadetblue;

    ul {
      width: 100%;
      display: flex;
      align-items: center;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
    }
  }
  .scroll-list {
    width: 500px;
    -webkit-backface-visibility: hidden;
    li {
      -webkit-backface-visibility: hidden;
      display: flex;
      line-height: 50px;
      height: 50px;
      // margin-bottom:5px;
      &:nth-child(even) {
        background: #ccc;
      }
      &:nth-child(odd) {
        background: cyan;
        // background: #ccc;
      }
      span {
        flex: 1;
        font-size: 14px;
        display: table;
        transform: translate3d(0, 0, 0);
      }
    }
  }
}
.list-box {
  display: flex;
  flex-wrap: nowrap;
  height: 50px;
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: cyan;
    width: 85px;
    margin-right: 15px;
    font-size: 16px;
    &:last-of-type {
      // margin-right: 0;
    }
  }
}
.scroll-list-box {
  position: absolute;
  top: 50px;
  left: 50px;
}
</style>